<template>
  <div>
    <headNav title="" :isHome="isHome" :signIn="signIn" @back='toBack' :backBySelf='true'></headNav>
    <div class="flexHeight bigDivCss" >
      <span>由班主任对绑定信息进行审核确认</span>
      <div class="smallDiv" v-for="(val, index) in examineArr" :key="index" @click="childrenClick(val)" >
        <div class="flexCenter stateDiv" :class="{inCss: val.status == 0, rejectCss:val.status == 2, endCss: val.status == 1}" >
          <span>{{val.statusDesc}}</span>
         </div>
        <div class="flexCenter headDiv" >
          <img src="@/assets/img/default_heads.png" alt="" v-if="!val.faceImgUrl" >
          <img :src="val.faceImgUrl" alt="" v-if="val.faceImgUrl" >
        </div>
        <div class="flexHeight informationCss" >
          <div class="flexAlign" style="height: 1rem;" >
            <span class="titleCss" >{{val.studentName}}</span>
            <span style="margin: 0.1rem 0 0 0.1rem;" >{{val.gradeName}}{{val.schoolClassName}}</span>
          </div>
          <div class="flexAlign schoolCss" >
            <div>
              <span>{{val.schoolName}}</span>
            </div>
            <img src="@/assets/img/my/arrow.png" mode="" style="width: 0.13rem; height: 0.2rem;"  >
            <!-- <span>></span> -->
          </div>
        </div>
      </div>
      <div class="flexCenter addButton" @click="toAdd" >
        + 添加孩子
      </div>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { getChildRecordsApi } from '@/api/myNewApi'
export default {
  components: {
    headNav,
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode
    })
  },
  data () {
    return {
      examineArr: '',
      isHome: false,
      signIn: false
    }
  },
  methods: {
     toBack () {
       if (this.signIn) {
         this.$store.dispatch('setting/loginOut')
         return
       }
       this.$router.push('/myNew/myNew')
    },
    // 编辑 && 添加孩子功能跳转
    childrenClick (e) {
        localStorage.editChildren = JSON.stringify(e)
        this.$router.push('addChildren')
        
    },
    toAdd(){
       localStorage.editChildren = ''
        this.$router.push('mode')
    }
  },
  async mounted() {
    if (localStorage.reloadJudge || localStorage.reloadJudge != undefined) {
      let value = JSON.parse(localStorage.reloadJudge)
      if (value) {
        localStorage.reloadJudge = false
        location.reload()
      }
    }



    this.examineArr = await getChildRecordsApi()
    if (this.examineArr.length == 0) {
      this.isHome = false
      this.signIn = true
      return
    } else {
      for (let val of this.examineArr) {
        if (val.statusDesc == '已绑定') {
          this.isHome = true
          this.signIn = false
          return
        } else {
          this.isHome = false
          this.signIn = true
        }
      }
    }

  }
}
</script>

<style lang="less" scoped >
 .inCss {
   background: #128FEF;
 }

 .rejectCss {
   background: #FFAD10;
 }

 .endCss {
   background: #14CC8D;
 }

.addButton {
  width: 6.5rem;
  height: 0.85rem;
  background: #FFF;
  color: #49A8F0;
  font-size: 0.3rem;
  border-radius: 0.42rem;
  border: 1px solid #49A8F0;
  margin: 0.3rem 0 0.3rem 0;
}

 .smallDiv {
   width: 6.5rem;
   height: 1.7rem;
   background: #FFF;
   border-radius: 0.15rem;
   display: flex;
   font-size: 0.24rem;
   margin: 0.15rem 0;
   position: relative;
   .stateDiv {
     width: 1.1rem;
     height: 0.45rem;
     border-radius: 0 0.15rem 0 0.15rem;
     position: absolute;
     top: 0;
     right: 0;
     span {
       font-size: 0.24rem;
       color: #FFF;
     }
   }
   .headDiv {
     width: 1.5rem;
     height: 100%;
     img {
       width: 1.1rem;
       border-radius: 0.6rem;
       height: 1.1rem;
       object-fit: cover;
     }
   }
   .informationCss {
     width: 5.4rem;
     height: 100%;
     margin-left: 0.1rem;
     .titleCss {
       font-size: 0.32rem;
       font-weight: 600;
     }
   }
   .schoolCss {
     height: 0.2rem;
     div {
       width: 4.5rem;
       height: 0.4rem;
      //  overflow-x: hidden;
     }
   }
}

.bigDivCss {
  width: 6.6rem;
  margin-left: 0.3rem;
  align-items: center;
  justify-content: center;
  span {
    font-size: 0.28rem;
    color: #666666;
    margin: 0.3rem 0;
  }
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexEdge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
